// 获取文章参数
let data = {
    pagenum: 1,//那页数据
    pagesize: 2 //控制一页显示几个

}
// 加载分页模块
let laypage = layui.laypage
let form = layui.form
// 获取文章数据，渲染
function renderArticle() {
    $.ajax({
        url: '/my/article/list',
        data: data,
        success: function (res) {
            let arr = []
            res.data.forEach(item => {
                arr.push(`<tr>
                <td>${item.title}</td>
                <td>${item.cate_name}</td>
                <td>${item.pub_date}</td>
                <td>${item.state}</td>
                <td>
                <a href='./edit.html?id=${item.id}' class="layui-btn layui-btn-normal layui-btn-xs" data-id='${item.id}' id='bj'>编辑</a>
                <button type="button" class="layui-btn layui-btn-danger layui-btn-xs" data-id='${item.id}'>删除</button>
                </td>
            </tr>`)
            })
            $('tbody').html(arr.join(""))
            //执行一个laypage实例
            laypage.render({
                elem: 'page', //注意，这里的 test1 是 ID，不用加 # 号
                count: res.total,//数据总数，从服务端得到
                limit: data.pagesize,//每页显示几条数据
                curr: data.pagenum,//当前页
                limits: [2, 3, 5, 7],
                layout: ['limit', 'prev', 'page', 'next', 'count', 'skip'],//自定义排版
                // // 当切换分页时触发；页面刷新触发
                jump: function (obj, first) {
                    //首次不执行
                    if (!first) {
                        //do something
                        //obj包含了当前分页的所有参数，比如：
                        // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                        // console.log(obj.limit); //得到每页显示的条数
                        // 当切换页码，修改data参数，重新获取
                        data.pagenum = obj.curr
                        data.pagesize = obj.limit
                        renderArticle()
                    }
                }
            });
        }
    })
}
renderArticle()


// 筛选 
// 1.获取所有分类，渲染
$.ajax({
    url: '/my/category/list',
    success: function (res) {
        let arr = []
        res.data.forEach(item => {
            arr.push(`<option value='${item.id}'>${item.name}</option>`)
        })
        $('select[name=category]').append(arr.join(""))
        // 更新渲染
        form.render('select')
    }
})

// 2.完成筛选
$('#search').on('submit', function (e) {
    e.preventDefault()
    let state = $('select[name=state]').val()
    let cate_id = $('select[name=category]').val()
    if (state) {
        data.state = state
    } else {
        delete data.state
    }
    if (cate_id) {
        data.cate_id = cate_id
    } else {
        delete data.cate_id
    }
    // 重置页码为1
    data.pagenum = 1
    renderArticle()
})

// 点击删除按钮，删除数据
$('tbody').on('click','button:contains("删除")', function () {
    let data = $(this).data('id')
    layer.confirm('确定删除吗？', function (index) {
        //do something
        $.ajax({
            url: '/my/article/delete/' + data,
            success: function (res) {
                layer.msg(res.message)
                if (res.status === 0) {
                    renderArticle()
                }
            }
        })
        layer.close(index);
    });
})